import { defineComponent } from 'vue'
import { useFlowState } from '../hooks/useFlowState'

export default defineComponent({
  name: 'CellConfig',
  emits: ['submit'],
  setup (_, { emit }) {
    const { state } = useFlowState()
    const submit = () => {
      emit('submit', state.currentCell!)
    }
    /* render 函数 */
    return () => {
      const cell = state.currentCell!
      const text = cell.isNode ? '节点' : '操作'
      const nodeConfig = (
        <a-form-item label="审批人">
          <a-input v-model={[cell.audit, 'value']} />
        </a-form-item>
      )
      return (
        <a-form class="p-1" layout="vertical" model={ cell }>
          <a-form-item label={`${text}ID`}>{ cell.id }</a-form-item>
          <a-form-item label={`${text}名称`}>
            <a-input v-model={[cell.name, 'value']} />
          </a-form-item>
          { cell.isNode && nodeConfig }
          <a-form-item>
            <a-button type="primary" onClick={ submit }><i class='far fa-save'></i> 保存</a-button>
          </a-form-item>
        </a-form>
      )
    }
  }
})
